<template>
  <form class="password">
    <div class="paw-heading">
      修改密码
    </div>
    <div class="paw-context">
      <div class="paw-group el-row">
        <label class="el-col-xs-6 el-col-sm-4 paw-label"><span style="color: red;font-size: 14px;">*</span>&nbsp;输入老密码:</label>
        <div class="el-col-xs-18 el-col-sm-8">
          <input class="paw-text" name="password" type="password" maxlength="20" v-model="changeUser.oldPassword"/>
        </div>
      </div><br>
      <div class="paw-group el-row">
        <label class="el-col-xs-6 el-col-sm-4 paw-label"><span style="color: red;font-size: 14px;">*</span>&nbsp;确认新密码:</label>
        <div class="el-col-xs-18 el-col-sm-8">
          <input class="paw-text" name="password" type="password" maxlength="20" v-model="changeUser.encodedPassword"/>
        </div>
      </div><br>
    </div>
    <div class="paw-footer">
      <div class="el-row footer-body">
        <div class="el-col-xs-18 el-col-sm-20 el-col-xs-offset-6 el-col-sm-offset-4">
          <el-button class="footer-button" @click="confirm">确定</el-button>
          <el-button class="goback-button" @click="goBack">返回</el-button>
        </div>
      </div>
    </div>
  </form>
</template>

<script>
import router from '@/router'
import { reactive } from '@vue/reactivity'
import { changePasswrod } from '@/api/user.js'
import { ElMessage } from 'element-plus'
  export default {
    name: "ChangePaw",
    setup(){
      let changeUser = reactive({
        mobile:'',
        encodedPassword:'',
        oldPassword:''
      })
      changeUser.mobile=localStorage.getItem('id')
      // 确认
      function confirm(){
        changePasswrod(changeUser).then(res =>{
          console.log(res);
          if(res.data.code === 401){
            ElMessage.error(res.data.msg)
            return
          }
          ElMessage.success("修改密码成功")
          router.replace({path:'/member/index'})
        })
      }
      // 返回
      function goBack(){
        router.replace({path:'/member/index'})
      }

      return {
        goBack,
        changeUser,
        confirm
      }
    }
  }
</script>

<style scoped>
  *{
    font-size: 13px;
    color: #333;
  }
  a{
    text-decoration: none;
    color: #666666;
  }
  ul{
    list-style: none;
    padding-left: 0;
  }
  .password{
    background-color: white;
  }
  .paw-heading{
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
  }
  .paw-context{
    padding: 15px 15px 0 15px;
    border-bottom: 1px solid #f0f0f0;
  }
  .paw-group{
    width: 100%;
    /*height: 31px;*/
    margin-left: -10px;
    margin-right: -10px;
  }
  .paw-label{
/*    width: 768px;*/
    text-align: right;
    margin-bottom: 0;
    padding-top: 7px;
    color: #666666;
  }
  .paw-text{
    width: 100%;
    height: 31px;
    margin-left: 20px;
    background-color: white;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .paw-text:hover{
    box-shadow: 0 2px 10px 5px rgba(64,158,255,0.2);
    border-color: #409EFF;
    cursor: pointer;
  }
  .paw-button{
    width: 86px;
    height: 36px;
    margin-left: 30px;
    color: white;
    border: none;
    background: -webkit-linear-gradient(left, #409EFF, plum);
    border-radius: 4px;
  }
  .paw-button:hover{
    cursor: pointer;
  }
  .paw-footer{
    padding: 10px 15px;
  }
  .footer-body{
    padding-left: 10px;
    padding-right: 10px;
  }
  .footer-button{
    opacity: 0.8;
    margin-right: 10px;
    line-height: 35px;
    padding: 0 20px;
    color: white;
    border: none;
    background: -webkit-linear-gradient(left, #409EFF, plum);
    border-radius: 4px;
  }
  .footer-button:hover{
    cursor: pointer;
  }
  .goback-button{
    line-height: 35px;
    padding: 0 20px;
    background-color: white;
    border-radius: 4px;
    border: 1px #d8d8d8 solid;
  }
  .goback-button:hover{
    cursor: pointer;
  }
</style>